<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8" />
        <title>申请售后-{eyou:global name='web_name' /}</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
        <link href="{eyou:global name='web_cmspath'/}/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        {eyou:static file="users/skin/css/bootstrap.min.css"/}
        {eyou:static file="users/skin/css/basic.css"/}
        {eyou:static file="users/skin/css/eyoucms.css"/}
        {eyou:static file="users/skin/css/shop.css"/}
        {eyou:static  file="users/skin/css/tb_style.css"/}
        <!-- 新样式 2020-11-25 -->
        {eyou:static file="users/skin/css/element/index.css" /}
        {eyou:static file="users/skin/css/e-user.css" /}
        {eyou:include file="users/skin/css/diy_css.htm"/}

        {eyou:static file="/public/static/common/js/jquery.min.js"/}
        {eyou:static file="/public/plugins/layer-v3.1.0/layer.js"/}
        {eyou:static file="/public/static/common/js/tag_global.js"/}
        <script type="text/javascript" src="__STATIC__/admin/js/jquery-ui/jquery-ui.min.js"></script>
    </head>

    <body class="centre shop">
    <!-- 头部 --> 
    {eyou:include file="users/users_header.htm" /} 
    <!-- 头部结束 -->

    <div class="ey-body-bg">
        <div class="ey-body">
            <div class="ey-container w1200">
                <!-- 侧边 --> 
                {eyou:include file="users/users_left.htm" /} 
                <!-- 侧边结束 --> 
                <!-- 中部 -->
                <div class="ey-con fr" >
                    <div class="el-main main-bg">
                        <div class="column-title mb20"> <div class="column-name">申请售后</div> </div>
                        <form id="post_form">
                            <input type="hidden" name="order_id" value="{$eyou.field.order_id}" />
                            <input type="hidden" name="details_id" value="{$eyou.field.details_id}" />
                            <input type="hidden" name="order_code" value="{$eyou.field.order_code}" />
                            <input type="hidden" name="product_id" value="{$eyou.field.product_id}" />
                            <input type="hidden" name="product_name" value="{$eyou.field.product_name}" />
                            <input type="hidden" name="product_num" value="{$eyou.field.num}" />
                            <input type="hidden" name="product_img" value="{$eyou.field.litpic}" />
                            <input type="hidden" name="product_spec" value="{$eyou.field.spec_value}" />
                            <input type="hidden" name="refund_price" value="{$eyou.field.product_price}" />
                            <div class="order-progress">
                                <div class="order-progress-tit2"> <div class="order-progress-titL">订单信息</div> </div>
                                <div class="order-progress-con">
                                    <div class="el-row shop-car">
                                        <div class="el-table el-table--fit el-table--enable-row-hover el-table--enable-row-transition" style="width: 100%; border-bottom: 1px solid #eee;">
                                            <table>
                                                <thead>
                                                    <tr>
                                                        <th style="width: 250px;"><div class="cell">订单编号</div></th>
                                                        <th style="width: 490px;"><div class="cell">商品名称</div></th>
                                                        <th style="width: 140px;"><div class="cell tc">单价</div></th>
                                                        <th style="width: 60px;"><div class="cell tc">数量</div></th>
                                                    </tr>
                                                </thead>
                                            
                                                <tbody>
                                                    <tr>
                                                        <td><div class="cell">{$eyou.field.order_code}</div></td>
                                                        <td>
                                                            <div class="cell">
                                                                <div class="goods-item">
                                                                    <div class="goods-item-l fl">
                                                                        <a target="_blank" href="{$eyou.field.arcurl}" title="{$eyou.field.product_name}"><img class="img-responsive" src="{$eyou.field.litpic}" alt="商品图"></a>
                                                                    </div>
                                                                    <div class="goods-item-r fl">
                                                                        <div class="cell">
                                                                            <a target="_blank" href="{$eyou.field.arcurl}" class="fc3">{$eyou.field.product_name}</a>
                                                                            <div class="info mt5">{$eyou.field.spec_value}</div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </td>
                                                        <td><div class="cell tc">{$eyou.field.product_price}</div></td>
                                                        <td><div class="cell tc">{$eyou.field.num}</div></td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>  
                                </div>

                                <div class="order-progress-tit2"> <div class="order-progress-titL">申请单填写</div> </div>
                                <div class="order-progress-con">
                                    <div class="item-from-row">
                                        <div class="from-row-l" style="width: 9%;"> <span class="red">*</span> 服务类型：</div>
                                        <div class="from-row-r">
                                            <label class="radio-label">
                                                <span>我要换货</span>
                                                <input type="radio" class="radio" id="service_type" name="service_type" value="1" checked="checked">
                                                <span class="check-mark"></span>
                                            </label>
                                            <label class="radio-label">
                                                <span>我要退货</span>
                                                <input type="radio" class="radio" id="service_type" name="service_type" value="2">
                                                <span class="check-mark"></span>
                                            </label>
                                        </div>
                                    </div>
                                    <div class="item-from-row">
                                        <div class="from-row-l" style="width: 9%;"> <span class="red">*</span> 问题描述：</div>
                                        <div class="from-row-r">
                                            <textarea rows="5" cols="60" name="content" class="fs16" maxlength="500"></textarea>
                                        </div>
                                    </div>

                                    <div class="item-from-row" id="dl_upload_img" data-numlimit="6">
                                        <div class="from-row-l" style="width: 9%;"> 图片说明：</div>
                                        <div class="from-row-r">
                                            <div class="from-row-r" style="width: 100%;">
                                                <div class="images_upload_main">
                                                    <a href="javascript:void(0);" onclick="GetUploadify(6, '', 'allimg', 'UploadImgCallBack', '', '图片说明');" class="el-button el-button--primary is-plain el-button--small"><i class="el-icon-picture"></i>上传图片</a>
                                                    <span style="color: #b7aeae;">提示：最多可上传6张图片，超过则不显示</span>
                                                    <div class="sort-list mt20 ui-sortable">
                                                        <div class="fieldext_upload ui-sortable-handle" style="display: none;"></div>
                                                    </div>
                                                </div>

                                                <!-- 上传图片显示的样板 start -->
                                                <div class="upload_img_upload_tpl" style="display: none;">
                                                    <div class="fieldext_upload">
                                                        <div class="images_upload_item" style="width: 105px; height: 105px;">
                                                            <input type="hidden" name="upload_img[]">
                                                            <a href="javascript:void(0);">
                                                                <img src="/public/static/admin/images/add-button.jpg" style="width: 105px; height: 105px;">
                                                            </a>
                                                            <a class="delete" style="width: 105px;" href="javascript:void(0)">&nbsp;&nbsp;</a>
                                                        </div>
                                                    </div>
                                                </div>
                                                <!-- 上传图片显示的样板 end -->
                                            </div>
                                        </div>
                                    </div>
                                </div>

                                <div class="order-progress-tit2"> <div class="order-progress-titL">商家收货地址</div> </div>
                                <div class="order-progress-con">
                                    <div class="item-from-row">
                                        <div class="from-row-l" style="width: 9%;"> 联系人：</div>
                                        <div class="from-row-r"> {$eyou.maddr.addr_contact_person} </div>
                                    </div>
                                    <div class="item-from-row">
                                        <div class="from-row-l" style="width: 9%;"> 联系号码：</div>
                                        <div class="from-row-r"> {$eyou.maddr.addr_contact_phone} </div>
                                    </div>
                                    <div class="item-from-row">
                                        <div class="from-row-l" style="width: 9%;"> 商家地址：</div>
                                        <div class="from-row-r"> {$eyou.maddr.addr_shipping_addr} </div>
                                    </div>
                                </div>

                                <div class="order-progress-tit2"> <div class="order-progress-titL">会员收货地址</div> </div>
                                <div class="order-progress-con">
                                    <div class="item-from-row">
                                        <div class="from-row-l" style="width: 9%;"> 联系人：</div>
                                        <div class="from-row-r"> <input type="text" name="consignee" value="{$eyou.field.consignee}" id="consignee" class="el-input__inner w500"> </div>
                                    </div>
                                    <div class="item-from-row">
                                        <div class="from-row-l" style="width: 9%;"> 联系号码：</div>
                                        <div class="from-row-r"> <input type="text" name="mobile" value="{$eyou.field.mobile}" id="mobile" class="el-input__inner w500"> </div>
                                    </div>
                                    <div class="item-from-row">
                                        <input type="hidden" name="addrinfo" value="{$eyou.field.province} {$eyou.field.city} {$eyou.field.district}">
                                        <div class="from-row-l" style="width: 9%;"> 会员地址：</div>
                                        <div class="from-row-r"> {$eyou.field.province} {$eyou.field.city} {$eyou.field.district} <input type="text" name="address" value="{$eyou.field.address}" id="address" class="el-input__inner w500"> </div>
                                    </div>
                                </div>

                                <div class="order-progress-tit2"> <div class="order-progress-titL">提交申请</div> </div>
                                <div class="order-progress-con">
                                    <input type="button" onclick="SubmitData(this);" data-url="{$eyou.url}" class="el-button el-button--primary " value="确认提交"/>
                                </div>
                            </div>
                        </form>
                    </div>   
                </div>
                <!-- 中部结束 --> 
            </div>
        </div>
    </div>
    <script type="text/javascript">
        // 上传多图回调函数
        function UploadImgCallBack(paths) {
            var last_div = $(".upload_img_upload_tpl").html();
            var obj = $('#dl_upload_img');
            for (var i = 0; i < paths.length; i++) {
                // 若可上传数量为0则执行返回
                var num = obj.attr('data-numlimit');
                if (0 == num) return false;
                num = Number(num) - 1;
                obj.attr('data-numlimit', num);

                // 拼装图片
                obj.find(".fieldext_upload:eq(0)").before(last_div);
                obj.find(".fieldext_upload:eq(0)").find('input').val(paths[i]);
                obj.find(".fieldext_upload:eq(0)").find('a:eq(0)').attr('href', paths[i]).attr('target', "_blank");
                obj.find(".fieldext_upload:eq(0)").find('img').attr('src', paths[i]);
                obj.find(".fieldext_upload:eq(0)").find('a:eq(1)').attr('onclick',"UploadImgDel(this, '"+paths[i]+"')").text('删除');
            }             
        }

        // 上传之后删除组图input
        function UploadImgDel(obj, path) {
            $(obj).parent().remove();
            $.ajax({
                type:'POST',
                url:"{:url('user/Uploadify/delupload', ['_ajax'=>1])}",
                data:{action:"del", filename:path},
                success:function(){
                    var img_obj = $('#dl_upload_img');
                    var num = img_obj.attr('data-numlimit');
                    num = Number(num) + 1;
                    img_obj.attr('data-numlimit', num);
                }
            });  
        }

        /** 以下 图集相册的拖动排序相关 js*/
        $( ".sort-list" ).sortable({
            start: function( event, ui) {},
            stop: function( event, ui ) {}
        });
        $( ".sort-list" ).disableSelection();

        // 提交申请
        function SubmitData(obj) {
            if ($("#service_type").val()=='') {
                layer.msg('请选择服务类型！');
                return false;
            } else if ($.trim($("[name='content']").val())=='') {
                $("[name='content']").focus();
                layer.msg('请填写问题描述！');
                return false;
            } else if ($("#address").val()=='') {
                $("[name='address']").focus();
                layer.msg('请填写您的收货地址！');
                return false;
            } else if ($("#consignee").val()=='') {
                $("[name='consignee']").focus();
                layer.msg('请填写您的姓名！');
                return false;
            } else if ($("#mobile").val()=='') {
                $("[name='mobile']").focus();
                layer.msg('请填写您的手机号码！');
                return false;
            }

            layer_loading('正在处理');
            $.ajax({
                url: $(obj).data('url'),
                data: $('#post_form').serialize(),
                type:'post',
                dataType:'json',
                success:function(res){
                    if (1 == res.code) {
                        layer.closeAll();
                        layer.msg(res.msg, {time: 1500}, function() {
                            window.location = res.url;
                        });
                    } else {
                        layer.closeAll();
                        layer.msg(res.msg);
                    }
                },
                error : function() {
                    layer.closeAll();
                    layer.alert('未知错误！', {title:false, icon:5, closeBtn: 0});
                }
            });
        }
    </script> 
    {eyou:include file="users/users_footer.htm" /} 
    <!-- 底部结束 -->